<template>
  <Panel title="拥堵程度" v-bind="props.config" :class="`${!roadType && 'traffic-level-content-padding'} traffic-level-content`">
    <!-- 普通公路维度才有    全路网即可展示两个vc -->
    <div class="item" v-show="roadType ==2 || !roadType">
      <div class="img-box">
        <div class="img-gs">
          <div class="gl-count number">{{ state.glRate }}</div>
        </div>
        <div class="road">普通公路V/C</div>
      </div>
    </div>

    <!-- 高速vc  高速维度才有 -->
    <div class="item" v-show="roadType ==1 || !roadType">
      <div class="img-box">
        <div class="img-gl">
          <div class="gs-count number">{{ state.gsRate }}</div>
        </div>
        <div class="road">高速公路V/C</div>
      </div>
    </div>

    <!--不是全路网的情况   当前路网维度vc与 右侧列表 -->
    <div class="item road-list" v-show="[1,2].includes(roadType)">
      <div class="right-list">
        <div
          v-for="(item, index) in state.list"
          :key="item.text"
          :class="item.crossTalkId === computedActiveId ? 'row active' : 'row'"
          @click="handleRow(item, index)"
        >
          <div class="ranking" :style="{ backgroundColor: colors[index] }">{{ index + 1 }}</div>
          <div class="text" :title="item.describe">{{ item.describe }}</div>
        </div>
      </div>
    </div>
  </Panel>
</template>
<script>
export default {
  name: 'TrafficLevel'
}
/**
 * @desc 拥挤程度
 * @auther 邓清波
 * @date 22/10/25
 * **/
</script>
<script setup>
import trafficApi from '../../api/traffic'
import Panel from '../../components/panel'
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import useWatchStore from '@/hooks/useWatchStore'

const props = defineProps({
  // 详情配置
  config: {
    type: Object,
    default: () => ({})
  }
})

const store = useStore()

// 当前选中id
const computedActiveId = computed(
  () => store.state.config.detailConfig.data && store.state.config.detailConfig.data.crossTalkId
)
const roadType = computed(() => store.state.config.roadType)
const emit = defineEmits(['setDetail'])

const colors = ['#f53f3f', '#f56a3f', '#f5843f', '#edaa0a', '#edaa0a'] // 前五颜色
const state = ref({
  list: [],
  glRate: null,
  gsRate: null
})

useWatchStore(getData)

/**
 * 获取拥挤程度数据
 */
function getData(argParams, changeType) {
  const params = {
    roadType: argParams.roadType,
    province: '32',
    city: argParams.isProvince ? null : argParams.areaCode
  }
  trafficApi.getDriveCrosstalk(params).then(res => {
    state.value = res.data || {}
  })
}

/**
 * 列表行点击
 * @param item Row
 * **/
function handleRow(item, i) {
  console.log(item)
  emit('setDetail', {
    type: 'traffic-level',
    actions: 'click',
    data: item,
    config: props.config.detailConfig
  })
}
</script>
<style scoped lang="less">
@import url(../../styles/themes);

/deep/ .mz-panel-content-main {
  flex-direction: row !important;
}

.traffic-level-content {
  display: flex;
}

.traffic-level-content-padding {
  /deep/ .mz-panel-content-main {
    padding: 0 11%;
  }
}

.img-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img-gs {
  text-align: center;
  width: 95px;
  height: 88px;
  background: url('../../assets/images/traffic/trafficLevel-gs-vc.png') bottom no-repeat;
  background-size: 100%;
}

.img-gl {
  width: 95px;
  height: 88px;
  text-align: center;
  background: url('../../assets/images/traffic/trafficLevel-gl-vc.png') bottom no-repeat;
  background-size: 100%;
}

.item {
  flex: 1;
  display: flex;
  height: 100%;
  width: 50%;
  justify-content: center;
  align-items: center;
}

.road-list {
  margin-right: 0 !important;
  width: 100%;
  overflow: hidden;
  justify-content: flex-start;
  padding: 0 3px;
}

.gs-count {
  font-size: 45px;
  height: 45px;
  color: #1172ea;
  margin-top: -20px;
}

.gl-count {
  font-size: 45px;
  height: 45px;
  color: #f56200;
  margin-top: -20px;
}

.road {
  height: 24px;
  line-height: 24px;
  color: #555;
}

.right-list {
  height: 100%;
  width: 100%;
  background: #fafcff;
  border: 1px solid #9cb5e8;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  .row:nth-child(even) {
    background-color: #ecf0f8;
  }

  .row {
    display: flex;
    align-items: center;
    text-align: left;
    padding-left: 12px;
    height: 20%;
    line-height: 27.5px;
    vertical-align: middle;
    color: #555555;
    cursor: pointer;

    &:hover {
      transition: background-color 0.3;
      background-color: @row-hover-bg;
    }

    .ranking {
      width: 18px;
      height: 18px;
      margin-right: 12px;
      text-align: center;
      line-height: 18px;
      color: #fafcff;
      border-radius: 50%;
    }

    .text {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .row.active {
    background-color: @row-active-bg;
  }
}
</style>
